{include file="public/header" /}
<body>
<style>
    .cion{
        display: inline-block;
        width: 120px;
    }
</style>
<div class="page-container">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>用户层级</legend>
    </fieldset>
    <div id="treeui" class="demo-tree-more"></div>
</div>

{include file="public/footer" /}

<script type="text/javascript">

    layui.use(['tree', 'util'], function(){
        var tree = layui.tree
            ,layer = layui.layer
            ,util = layui.util;

        let testData = [{
            title: '总节点',id: 1,children: [{
                title: '油条'
                ,id: 2
            },{
                title: '包子'
                ,id: 3
            },{
                title: '豆浆'
                ,id: 4
            }]
        }]

        let initEvent = function(){
            $(".layui-tree-main").on("click",function () {
               alert(1);
            })
        }
        //无连接线风格
      let initTree = function(){
           tree.render({
               elem: '#treeui'
               ,data: testData
               // ,edit: ['add', 'update', 'del'] //操作节点的图标
               ,showLine: false,  //是否开启连接线
               click: function(obj){
                   console.log(obj)
                   if (obj.data.children){
                       return;
                   }
                   obj.data.children=[];
                   var item = {
                       title: '新增'
                       ,id: 101
                   }

                    var html = "<div class=\"layui-tree-pack layui-tree-lineExtend\" \"=\"\" style=\"display: block;\">" ;
                   for (var i=0;i<5;i++){
                       html = html+
                           "<div data-id="+item.id+" class=\"layui-tree-set\">" +
                           "<div class=\"layui-tree-entry\">" +
                           "<div class=\"layui-tree-main\">" +
                           "<span class=\"layui-tree-iconClick\">" +
                           "<i class=\"layui-tree-iconArrow layui-hide\"></i>" +
                           "</span><span class=\"layui-tree-txt\">"+item.title+"</span>" +
                           "</div></div></div>"
                       obj.data.children.push(item)
                   }
                   html+ "</div>";
                   obj.elem.append(html)
                   var iconArrow =obj.elem.find("i").first();
                   iconArrow.removeClass("layui-hide")
                   $(initEvent)
               }
           });
       }
       $(initTree)

    });



    let add =function(id){

    }

    let find=function(id){

    }


</script>